<template>
  <div class="viewDetail">
    <div class="viewDetail-title flex pl-16 bg_fff c_text2">
      <div
        class="tab-item commhover mr-26"
        :class="{ active: activetab == 1 }"
        @click="handleTab(1)"
      >
        规则设置
      </div>

      <el-tooltip effect="dark" placement="top" popper-class="commtooltip">
        <div slot="content">
          查看/编辑生效的具体群聊信息，请至<br />单号配置模式该功能下操作
        </div>
        <div
          class="tab-item commhover hovernot c_text4"
          :class="{ active: activetab == 2 }"
        >
          生效群
        </div>
      </el-tooltip>
    </div>
    <div class="viewDetail-big">
      <div class="tips f-13 br_4 mb-20">
        <i class="el-icon-warning f-14 c_warning mr-8"></i>
        设置完成后，请点击“保存并应用配置”按钮，才能生效；如需单个企微号配置请前往“<span
          style="color: #2d8cf0"
          >单号配置-关键词拉群</span
        >”
      </div>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="130px"
        label-position="left"
        size="small"
      >
        <el-form-item label="拉群模式：" prop="type">
          <el-radio-group v-model="form.type" class="flex">
            <!-- <div
              v-for="(item, index) in moduleList"
              :key="index"
              class="radiobox bg_fff commhover c_text2 mr-12"
            > -->
            <el-radio
              v-for="(item, index) in moduleList"
              :key="index"
              size="medium"
              :label="item.value"
              class="radiobox bg_fff commhover mr-12"
            >
              <span class="c_text2"> {{ item.label }}</span>
              <div class="c_text3 f-12 mt-8">{{ item.info }}</div>
            </el-radio>
            <!-- </div> -->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="方案名称：" prop="name">
          <el-input
            v-model="form.name"
            clearable
            placeholder="请输入方案名称，最长15个字"
            maxlength="20"
            show-word-limit
            style="width: 100%; max-width: 588px"
          ></el-input>
        </el-form-item>
        <el-form-item v-if="form.type == 1" label="触发方式：" prop="name">
          <el-checkbox-group v-model="form.way">
            <div
              v-for="(item, index) in ways"
              :key="index"
              class="mycheckbox mb-16"
            >
              <div class="check_header bg_f7f7f7 plr-12 flex aligncenter">
                <el-checkbox :label="item.value"
                  ><span class="c_text2"> {{ item.label }}</span></el-checkbox
                >
              </div>
              <div class="check_body p-16">
                <AddKeyword
                  v-model="form['chatKeyword' + item.value]"
                  inputWidth="560px"
                  :listlength="10"
                />
              </div>
            </div>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item v-if="form.type == 2">
          <div class="mycheckbox mb-16">
            <div class="check_header bg_f7f7f7 plr-12 flex aligncenter">
              <span class="c_text2"> 仅自己触发</span>
            </div>
            <div class="check_body p-16">
              <AddKeyword
                v-model="form['chatKeyword4']"
                inputWidth="560px"
                :listlength="10"
              />
            </div>
          </div>
        </el-form-item>
        <div class="divide"></div>
        <template v-if="form.type == 1">
          <div class="kw_tips flex mb-20">
            <div class="kw_icon mt-2"><i class="el-icon-warning"></i></div>
            <div class="kw_content">
              <div>
                1、客户群人数多于40人后，需要发送群邀请链接，客户确认后才能进群
              </div>
              <div>2、已在群中的客户不会重复邀请</div>
              <div>
                3、优先拉入已选择的客户群，全部完成后，系统会根据设置自动新建客户群
              </div>
            </div>
          </div>
          <el-form-item label="选择客户群：" prop="radio">
            <el-radio-group v-model="form.radio">
              <el-radio :label="1" disabled>
                <el-tooltip
                  effect="dark"
                  placement="top"
                  content="生效群如需选择具体客户群，请前往单号配置模式下该功能点处创建。"
                  popper-class="commtooltip"
                >
                  <span class="c_text4">选择具体客户群</span>
                </el-tooltip>
              </el-radio>
              <el-radio :label="2"
                ><span class="c_text">根据条件筛选群聊</span></el-radio
              >
            </el-radio-group>
            <div class="groupbox pb-20 p-16 mt-10">
              <GroupForm />
              <div class="flexbetween bg_f7f7f7 p-5 pl-8 pr-8 e_exclude">
                <div class="fw-6 flexcenter">
                  设置排除条件
                  <el-switch
                    v-model="form.exclude"
                    active-color="#3070ff"
                    inactive-color="#c7c5c5"
                    :active-value="1"
                    :inactive-value="0"
                    class="ml-6"
                  >
                  </el-switch>
                </div>
                <div class="c_warning2">开启后将排除满足以下条件客户群</div>
              </div>
              <GroupForm v-if="form.exclude == 1" />
            </div>
            <div class="groupbox-foot plr-16">
              <el-checkbox v-model="form.checked1">
                <span class="c_text"
                  >符合条件新群自动加入（建群5分钟时判断是否符合）</span
                >
              </el-checkbox>
            </div>
          </el-form-item>
          <el-form-item label="群人数上限：" prop="num">
            <el-input
              v-model="form.num"
              clearable
              placeholder=""
              type="number"
              style="width: 90px"
              @blur="handleBlurNumber('num', 50)"
            ></el-input>
            <div class="c_text3 mt-2">
              已选择和自动新建的客户群，群成员达到设置值，自动递补拉入下一个群
            </div>
          </el-form-item>
          <el-form-item label="自动新建群：" prop="status">
            <div class="flex aligncenter">
              <el-switch
                v-model="form.status"
                inactive-color="#BFBFBF"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
              <span class="c_text3 pl-10">开启后，群不够自动新建</span>
            </div>
          </el-form-item>
          <el-form-item label="群名称：" prop="status">
            <div class="c_text">
              <el-input
                v-model="form.groupname"
                clearable
                placeholder="请输入"
                maxlength="15"
                show-word-limit
                style="width: 310px"
              ></el-input>
              <span class="pl-20 pr-20">群自动编号，从</span>
              <el-input
                v-model="form.no"
                clearable
                placeholder=""
                type="number"
                style="width: 90px"
                @blur="handleBlurNumber('no', 999)"
              ></el-input>
              <span class="pl-20"> 开始</span>
            </div>
            <div class="c_text3 mt-2">
              举例：群名称“团购群”，编号从3开始。则新建群的名称为“团购群3”“团购群4”“团购群5”……
            </div>
          </el-form-item>
          <div class="divide"></div>

          <el-form-item label="发送内容：">
            <div>
              <el-button type="primary" plain disabled icon="el-icon-plus"
                >添加客户</el-button
              >
              <el-button type="primary" plain disabled icon="el-icon-plus"
                >添加企业成员</el-button
              >
            </div>
            <div class="c_text3 mt-2">
              “多号聚合”模式创建不支持选择进群固定成员，如需设置请应用至多个企微号后前往<span
                class="c_primary"
                >单号配置-关键词拉群</span
              >”操作
            </div>
          </el-form-item>
          <el-form-item label="入群前引导语：" prop="status">
            <div class="flex aligncenter">
              <el-switch
                v-model="form.status"
                inactive-color="#BFBFBF"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
              <span class="c_warning2 pl-10"
                >客户群人数少于40人直接拉群；40人后若开启引导语，会先发送引导语，再发送邀请链接</span
              >
            </div>
          </el-form-item>
          <el-form-item label="">
            <MaterialContent ref="material" :maxlength="6" />
          </el-form-item>
        </template>
        <template v-if="form.type == 2">
          <el-form-item label="群名称：" prop="groupname">
            <LabelTextarea v-model="form.groupname" :tagList='tagList' class="labelwidth" />
          </el-form-item>
          <el-form-item label="新建群固定成员：">
            <div>
              <el-button type="primary" plain disabled icon="el-icon-plus"
                >添加客户</el-button
              >
              <el-button type="primary" plain disabled icon="el-icon-plus"
                >添加企业成员</el-button
              >
            </div>
            <div class="c_text3 mt-2">
              “多号聚合”模式创建不支持选择进群固定成员，如需设置请应用至多个企微号后前往<span
                class="c_primary"
                >单号配置-关键词拉群</span
              >”操作
            </div>
          </el-form-item>
          <el-form-item label="每日新建群上限：" prop="number">
            <el-input
              v-model="form.number"
              clearable
              placeholder=""
              type="number"
              style="width: 90px"
              @blur="handleBlurNumber('number', 50)"
            ></el-input>
            <span class="c_text3 pl-10">个群</span>
          </el-form-item>
        </template>
      </el-form>
    </div>
    <div class="greetfoot flexcenter bg_fff p-12">
      <el-button v-hasPermi="['system:keywordpullgroup:save']" type="primary" size="small" @click="handleSave"
        >保存配置</el-button
      >
      <el-button v-hasPermi="['system:keywordpullgroup:savetouse']" type="warning" size="small" @click="saveApplicate"
        >保存并应用配置</el-button
      >
    </div>
    <select-wechat v-if="showWechat" :visableIf.sync="showWechat" />
  </div>
</template>

<script>
//import {listUser, delUser,} from "@/api/system/user";
import GroupForm from "@/components/UserGroupComp/components/GroupForm";
import { listUser } from "@/api/system/user";
import MaterialContent from "@/components/MaterialContent";
import MaterialContentGroup from "@/components/MaterialContentGroup";
import SelectWechat from "@/components/UserGroupComp/SelectWechat.vue";
import AddKeyword from "@/components/AddKeyword";
import LabelTextarea from '@/components/LabelTextarea'
export default {
  name: "addOrEditUserOperations",
  components: {
    GroupForm,
    MaterialContent,
    MaterialContentGroup,
    SelectWechat,
    AddKeyword,
    LabelTextarea
  },
  data() {
    return {
      activetab: 1, //当前选中
      moduleList: [
        {
          value: 1,
          label: "多客户模式",
          info: "邀请多个客户进同个群聊，群满后进下个群",
        },
        { value: 2, label: "单客户模式", info: "新建立每个客户的专属群聊" },
      ],
      form: {
        type: 1,
        name: "",
        way: [],
        exclude: 0,
        chatKeyword1: [],
        chatKeyword2: [],
        chatKeyword3: [],
        chatKeyword4: [], //仅自己
        num: 500,
      },
      rules: {
        name: [{ required: true, message: "请输入标签名称", trigger: "blur" }],
      },
      ways: [
        { value: 1, label: "聊天双方都可触发" },
        { value: 2, label: "仅客户可触发" },
        { value: 3, label: "仅自己触发" },
      ],
      showWechat: false,
      tagList:[{name:'称呼/昵称',value:'{{称呼/昵称}}'},{name:'当前备注',value:'{{当前备注}}'}],
    };
  },
  props: {
    info: {
      type: Object,
      default: {},
    },
  },
  created() {
    if (this.info) {
      this.form.name = this.info.planName;
    }
  },
  methods: {
    handleTab(type) {
      this.activetab = type;
    },

    handleBlurNumber(type, maxnumber) {
      // 使用正则表达式匹配正整数
      const regex = /^[1-9]\d*$/;
      // 如果输入的值不是正整数，则将其设置为上一个有效值
      if (!regex.test(this.form[type])) {
        this.form.min = maxnumber;
      } else {
        if (this.form[type] > 500) {
          this.form[type] = maxnumber;
        }
      }
    },
    // /** 查询用户列表 */
    // getList() {
    //   this.loading = true;
    //   listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
    //     (response) => {
    //       this.tableDataList = response.rows;
    //       this.total = response.total;
    //       this.loading = false;
    //     }
    //   );
    // },
    /** 搜索按钮操作 */
    // handleQuery() {
    //   this.queryParams.pageNum = 1;
    //   this.getList();
    // },

    saveApplicate() {
      this.showWechat = true;
    },

    handleSave() {
      console.log("this.form:", this.form);
    },
  },
};
</script>
<style lang="scss" scoped>
.viewDetail {
  height: 100%;
  position: relative;
  // overflow-y: auto;
  .viewDetail-title {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e9e9e9;
    .tab-item {
      height: 100%;
      border-bottom: 2px solid transparent;
      &.active {
        color: #3070ff;
        border-bottom-color: #3070ff;
      }
    }
  }
  .viewDetail-footer {
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #eee;
  }
  .tips {
    background: #ffede3;
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px 15px;
    word-wrap: break-word;
  }
}
.viewDetail-big {
  height: calc(100vh - 200px);
  overflow-y: auto;
  padding: 20px;
}
.radiobox {
  width: 288px;
  height: 72px;
  padding: 16px 10px 16px 16px;
  border-radius: 2px;
  border: 1px solid #e9e9e9;
  display: inline-flex;
  font-size: 14px;
  &.is-checked {
    border: 1px solid #3070ff;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  }
}
.g_line {
  color: rgba($color: #000000, $alpha: 0.06);
  margin: 0px 20px;
}
.groupbox {
  border: 1px solid rgb(238, 238, 238);
}
.e_exclude {
  width: 568px;
  margin: 20px 0;
}
.groupbox-foot {
  display: flex;
  align-items: center;
  height: 46px;
  background: #f5f6f7;
  border-radius: 2px;
  outline: 1px solid #e9e9e9;
}
.greetfoot {
  border-top: 1px solid #e9e9e9;
  position: sticky;
  bottom: 0;
  z-index: 999;
}
.mycheckbox {
  border: 1px solid #f0f0f0;
  border-radius: 4px 4px 0 0;
}
.check_header {
  height: 46px;
}
.divide {
  width: 100%;
  margin: 24px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.kw_tips {
  padding: 8px 15px;
  word-wrap: break-word;
  border-radius: 4px;
  background: rgba(47, 84, 235, 0.1);
  border-color: rgba(47, 84, 235, 0.1);
}
.kw_icon {
  width: 24px;
  color: #5976ef;
  i {
    font-size: 16px;
    transform: rotate(180deg);
  }
}
.labelwidth{
  max-width: 586px;
}
</style>
